<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			
			* {
				padding: 0;
				margin: 0;
			}

			div {
				width: 200px;
				height: 200px;
				background-color: red;
				margin: 50px auto 0;
				transiion: 2s;
			}
			
			/* 当浏览器窗口宽度 <= 600px */
			@media only screen and (max-width: 600px) {
				div {
					transform: skewX(45deg);
				}
			}
			
			/* 600px到900像素之间的样式 */
			@media only screen and (min-width: 600px) and (max-width: 900px) {
				div {
					width: 300px;
					height: 300px;
					background-color: yellow;
				}
			}
			/* >= 900px的样式 only可以省略 */
			@media screen and (min-width: 900px) {
				div {
					transform: skewX(-45deg);
				}
			}

			@media screen and (max-height: 500px) {
				div {
					border-radius: 50%;
				}
			}
			

			/*
				<=800时的样式
			*/
			@media not screen and (min-width: 800px) {
				div {
					outline: 20px solid gold;
				}
			}


		</style>
	</head>
	<body>
		


		<!-- 媒体查询 -->
		<!-- 语法 -->

		<!-- 
			not: 不在...条件下
			only: 仅在...条件下
			mediatype: 媒体类型
			all: 所有设备
			screen: 手机, 电脑, 平板
			speech: 阅读器设备
			print: 打印设备
			@media not|only mediatype and (条件1) and (条件2) ... {
				样式
			}


		 -->

		<div></div>


	</body>
</html>